<template>
    <div class="app-container">
        <el-form :model="queryParams.criteria" ref="queryForm" :inline="true" label-width="68px">
            <!--<el-form-item label="卡号" prop="cardCode">-->
                <!--<el-input-->
                        <!--v-model="queryParams.cardCode"-->
                        <!--placeholder="请输入卡号"-->
                        <!--clearable-->
                        <!--size="small"-->
                        <!--@keyup.enter.native="handleQuery"-->
                <!--/>-->
            <!--</el-form-item>-->
            <el-form-item label="会员名称" prop="employeeName">
                <el-input
                        v-model="queryParams.employeeName"
                        placeholder="请输入会员名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号码" prop="employeePhone">
                <el-input
                        v-model="queryParams.employeePhone"
                        placeholder="请输入手机号码"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="状态" prop="statusId">
                <el-select
                        v-model="queryParams.criteria.statusId"
                        placeholder="选择状态"
                        clearable
                        size="small"
                        style="width: 160px"
                >
                    <el-option
                            v-for="dict in ststusList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        icon="el-icon-check"
                        size="mini"
                        :disabled="multiple"
                        @click="handleSelectedShip"
                >批量发货</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="注册时间" align="center" prop="createdDate" width="180">
            <template slot-scope="scope">
            <span>{{ formatDate(scope.row.createdDate, 'yyyy-MM-dd') }}</span>
            </template>
            </el-table-column>
            <el-table-column label="会员名称" align="center" prop="employeeName" width="120"/>
            <el-table-column label="手机号码" align="center" prop="employeePhone" width="120"/>
            <el-table-column label="状态" align="center" prop="statusName" width="120"/>
            <el-table-column label="收货地址" align="center" prop="address" />

            <!--<el-table-column label="发货人ID" align="center" prop="shiperId" />-->
            <!--<el-table-column label="发货人名称" align="center" prop="shiperName" />-->
            <!--<el-table-column label="发货时间" align="center" prop="shiperDate" width="180">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{ parseTime(scope.row.shiperDate, '{y}-{m}-{d}') }}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.statusId==='20'"
                            size="mini"
                            type="text"
                            icon="el-icon-check"
                            @click="handleShip(scope.row)"
                    >发货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageDto.pageNum"
                :limit.sync="queryParams.pageDto.pageSize"
                @pagination="getList"
        />
    </div>
</template>

<script>
    import {formatDate} from '@/utils/dateUtil'
    import {getPage,shipOrder} from '@/api/cardOrder'
  export default {
    name: 'index',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 会员卡运输单表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageDto:{
            pageNum: 1,
            pageSize: 20,
          },
          criteria:{
            cardCode: undefined,
            employeeName: undefined,
            employeePhone: undefined,
            statusId: undefined,
          }
        },
        ststusList:[
          {label:'已支付',value:'20'},
          {label:'已发货',value:'30'},
        ]
      };
    },
    created() {
      this.getList();
    },
    methods: {
      formatDate,
      /** 查询会员卡运输单列表 */
      getList(val) {
        this.loading = true;
        if(val){
          this.queryParams.pageDto.pageNum = val.page;
          this.queryParams.pageDto.pageSize = val.limit;
        }
        getPage(this.queryParams).then(response => {
          this.orderList = response.result.list;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      handleSelectedShip(){
        let unShipList = this.orderList.filter(item=>{
          return this.ids.includes(item.id) && item.statusId==='20'
        });
        if(unShipList.length>0){
          let unShipIds = unShipList.map(item=>item.id);
          this.$confirm('当前选择'+unShipIds.length+'条数据，是否全部发货?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            shipOrder({idList:unShipIds}).then(resp=>{
              if(!resp.hasError){
                this.$message.success('操作成功！')
                this.getList()
              }
            })
          })
        }else{
          this.$message.info('没有选择可以发货的数据');
          this.getList();
        }
      },
      handleShip(row){
        let idList=[];
        idList.push(row.id);
        shipOrder({idList}).then(resp=>{
          if(!resp.hasError){
            this.$message.success('操作成功！')
            this.getList()
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
